<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登陆页面</title>
    <link rel="stylesheet" href="css/conmmon.css">
    <link rel="stylesheet" href="css/login.css">

    <!-- 引入jQuery 的 js 文件 -->
    <script src="js/jquery.min.js"></script>
</head>

<body>
<!-- 导航栏 -->
<div class="nav">
    <img src="img/logo2.jpg" alt="">
    <span class="title">我的博客系统</span>
    <!-- 用来占据中间位置 -->
    <span class="spacer"></span>
    <a href="blog_list.html">主页</a>
    <a href="reg.html">注册</a>
</div>
<!-- 版心 -->
<div class="login-container">
    <!-- 中间的登陆框 -->
    <div class="login-dialog">
        <h3>登陆</h3>
        <div class="row">
            <span>用户名</span>
            <input type="text" id="username">
        </div>
        <div class="row">
            <span>密码</span>
            <input type="password" id="password">
        </div>
        <div class="row">
            <!-- 添加点击事件 onclick="mysub()" -->
            <button id="submit" onclick="mysub()">提交</button>
        </div>
    </div>
</div>

<!-- 写js代码 -->
<script>
        function mysub() {
            // 1.非空校验
            // 1.1 获取参数
            var username1 = jQuery("#username");
            var password1 = jQuery("#password");

            // 1.2 判断 注意加上val()方法
            if(username1.val().trim() == null) {
                alert("请输入用户名");
                username1.focus();
                return false;
            }

            if(password1.val().trim() == null) {
                alert("请输入密码");
                password1.focus();
                return false;
            }

            // 2.发生登录请求传递给后端
            jQuery.ajax({
                url: "/user/login",
                type: "POST",
                data:{
                    // "username" 和 "password" 都是后端接收到的，和后端名字保持一致
                    // 从控件中取参数
                    "username":username1.val(),
                    "password":password1.val()
                },
                success: function(res) {
                    // 状态码是200，只能说明这次前后端交互通讯成功，
                    // 究竟有没有登录成功，是返回一个对象还是成功与否id呢
                    // 在此我们返回一个id 1表示成功，0表示失败
                    if(res.code == 200 || res.data == 1) {
                        // 登陆成功,跳转到 博客列表页
                        alert("登陆成功");
                        // 错误写法，正确的应该是 =
                        // location.href("myblog_list.html");
                        location.href = ("myblog_list.html");
                    }else {
                        // 加上失败信息
                        alert("登陆失败" + res.msg);
                    }
                }
            });
        }
    </script>
</body>

</html>